<template>
  <div class="menu">
    <div class="logo"><i v-if="menuShow" class="fa fa-line-chart"></i><span v-else>数据分析系统</span></div>
    <el-menu :default-active="onRoutes" theme="dark" unique-opened router :collapse="menuShow">
      <div v-for="(item,index) in arr" :key="index">
        <el-submenu v-if="item.modulePath===null" :index="parseInt(index + 1).toString()">
          <template slot="title">
            <i :class="item.moduleIcon"></i>
            <span>{{ item.moduleName }}</span>
          </template>
          <el-menu-item v-for="(item2,index2) in item.moduleItems" :index="item2.modulePath" :key="index2">
            <i :class="item2.moduleIcon"></i>
            <span>{{ item2.moduleName }}</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item v-else :index="item.modulePath">
          <i :class="item.moduleIcon"></i>
          <span slot="title">{{ item.moduleName }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>

</template>
<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        arr: JSON.parse(sessionStorage.getItem('router'))
      }
    },
    computed: {
      ...mapState({
        menuShow: state => state.menuShow
      }),
      onRoutes () {
        return this.$route.path.replace('/', '')
      }
    }
  }
</script>
